<template>
  <div class="shopmsg">
    <div class="header">
      <div class="top">
        <div class="pic">
          <img :src="url+detail.image_path" alt />
        </div>
        <div class="msg">{{detail.name}}</div>
      </div>
    </div>
    <div class="title">
      <div class="food" @click="getfood">
        <span :class="isshop===true?'active':''">商品</span>
      </div>
      <div class="commend" @click="getcommend">
        <span :class="isshop===false?'active':''">评论</span>
      </div>
    </div>
    <div class="foodlist" v-if="isshop===true">
      <div class="shoptype">
        <ul>
          <li
            v-for="(item,index) in shoptype"
            :key="index"
            :class="index===s?'active':''"
            @click="golink(index)"
          >{{item.name}}</li>
        </ul>
      </div>
      <div class="shopbox">
        <div class="shoplist" ref="par">
          <div class="shopname" v-for="(item,index) in shoptype" :key="index" :ref="item.id">
            <div>
              <span style="font-size:18px;">{{item.name}}</span>
              <span>{{item.description}}</span>
            </div>
            <div v-for="(item,index) in item.foods" :key="index" class="fooddetail">
              <div class="pic">
                <img :src="url+item.image_path" alt />
              </div>
              <div class="name">{{item.name}}</div>
            </div>
          </div>
          <div style="height:300px"></div>
        </div>
      </div>
    </div>
    <div class="commend" v-else>
      <div class="score"></div>
    </div>
  </div>
</template>

<script>
import bus from "../../components/bus";
import http from "../../network/request";
export default {
  data() {
    return {
      s: 0,
      rollheight: [],
      foodtypeid: [],
      isshop: true,
      backimg: {
        background: "rgba(0, 0, 0, 0.5)",
      },
      url: "https://elm.cangdu.org/img/",
      shoptype: [],
      shoplist: [],
      tags: [],
      ratings: [],
      score: {},
      detail: {},
    };
  },
  created() {
    // console.log(this.$route.query.id);
    this.gethttp();
  },
  mounted() {
    this.getheight();
  },
  methods: {
    golink(id) {
      console.log(this.rollheight[id - 1]);

      // console.log();
      if (id == 0) {
        //document.querySelector(".shoplist").style.top = 0;
        document.documentElement.scrollTop = 0;
        return;
      }
      var h = 198 + this.rollheight[id];
      // document.querySelector(".shoplist").style.top =
      // -this.rollheight[id - 1] + "px";
      document.documentElement.scrollTop = this.rollheight[id - 1];
      //   document.body.clientHeight = 500;
      //   document.body.offsetHeight = 500;
      //   document.body.scrollHeight = 500;
      //   document.body.scrollTop = 500;
    },
    getscrollid() {
      let s = 0;
      // console.log("fafa");
      for (let i = 0; i < this.foodtypeid.length; i++) {
        //console.log(this.$refs[this.foodtypeid[i]][0].clientHeight);
        s += this.$refs[this.foodtypeid[i]][0].clientHeight;
        this.rollheight.push(s);
        //console.log("需要到达的高度" + s);
      }
      //console.log(this.rollheight);
    },
    getheight() {
      let that = this;

      //   for (let i; i < this.$refs.length; i++) {
      //     console.log(that.foodtypeid);
      //     console.log("fafagag");
      //     console.log(that.$refs["10239"][0].clientHeight);
      //   }
      let n = 0;
      window.onscroll = function () {
        //document.querySelector(".shoplist").style.top = "";
        that.rollheight;
        // let n = that.$refs[that.foodtypeid[i]][0].clientHeight;
        // console.log(n);
        // scrollTop 滚动条滚动时，距离顶部的距离
        var scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        console.log("距离顶部的距离" + scrollTop);
        //windowHeight 可视区的高度
        var windowHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
        //console.log("可视区的高度" + windowHeight);
        // scrollHeight 滚动条的总高度
        var scrollHeight =
          document.documentElement.scrollHeight || document.body.scrollHeight;
        // console.log("滚动条的总高度" + scrollHeight);
        // 滚动条到底部的条件;
        // console.log("fafa" + that.rollheight[1]);
        // console.log(that.rollheight[i]);

        for (let i = 0; i < that.rollheight.length; i++) {
          if (
            scrollTop >= that.rollheight[i] &&
            scrollTop < that.rollheight[i + 1]
          ) {
            i++;
            that.s = i;
            console.log(i);
          }
          if (scrollTop + windowHeight == scrollHeight) {
            that.s = that.rollheight.length - 1;
          }
          if (scrollTop == 0) {
            that.s = 0;
          }
        }

        // if (scrollTop + windowHeight >= scrollHeight / 0.9) {
        //   that.s = that.rollheight.length - 1;
        //   console.log(that.s);
        //   console.log("向上");
        // }
      };
    },
    //获取数据
    gethttp() {
      bus.$on("getshopmsg", (item) => {
        this.detail = item;
        console.log(this.detail);
      });
      http({
        url: `/shopping/v2/menu?restaurant_id=${this.$route.query.id}`,
      })
        .then((res) => {
          console.log(res.data);

          this.foodtypeid = res.data.map((item) => {
            return item.id;
          });

          this.shoptype = res.data;
        })
        .then(() => {
          this.getscrollid();
        });
      http({
        url: `/ugc/v2/restaurants/${this.$route.query.id}/ratings/tags`,
      }).then((res) => {
        console.log(res);
      });
      http({
        url: `/ugc/v2/restaurants/${this.$route.query.id}/ratings/scores`,
      }).then((res) => {
        console.log(res.data.service_score);
        this.score = res.data;
      });
      http({
        url: `/ugc/v2/restaurants/${this.$route.query.id}/ratings?offset=0&limit=10`,
      }).then((res) => {
        console.log(res);
      });
    },
    //切换商品或评论
    getfood() {
      this.isshop = true;
    },
    getcommend() {
      this.isshop = false;
    },
  },
  beforeDestroy() {
    bus.$off("getshopmsg");
  },
};
</script>

<style>
.header {
  z-index: 99;
  width: 100%;
  height: 8.5rem;
  position: fixed;
  top: 0;
  background-color: black;
}
.header .top {
  width: 100%;
  display: flex;
}
.header .top .pic {
  width: 25%;
}
.header .top .pic img {
  width: 100%;
}
.header .top .msg {
  flex: 1;
}
.title {
  background-color: white;
  z-index: 99;
  position: fixed;
  top: 8.5rem;
  width: 100%;
  display: flex;
  text-align: center;
  height: 3.5rem;
  line-height: 3.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
.title .active {
  border-bottom: 2px solid blueviolet;
  padding-bottom: 0.5rem;
}
.title .food {
  flex: 1;
}
.title .commend {
  flex: 1;
}

.foodlist .shoptype .active {
  background-color: white;
}

.foodlist .shoptype {
  width: 25%;
  background-color: rgb(204, 190, 190);
  float: left;
  position: fixed;
  top: 12rem;
  z-index: 99;
}
.foodlist .shoptype ul li {
  width: 100%;
  height: 4.3rem;
  line-height: 4.3rem;
  color: #666666;
  border-bottom: 1px solid pink;
}
.foodlist .shopbox {
  width: 75%;
  float: left;
  position: relative;

  left: 25%;
  z-index: 1;
  top: 12rem;
}
.foodlist .shopbox .shoplist {
  position: absolute;
}
.foodlist .shoplist .fooddetail {
  display: flex;
  height: 4rem;
}
.foodlist .shoplist .fooddetail .pic {
  width: 30%;
}
.foodlist .shoplist .fooddetail .pic img {
  height: 100%;
  width: 100%;
}
.foodlist .shoplist .fooddetail .name {
  flex: 1;
}
</style>